<template>
    <div class="search-bar" :class="{ active: isTop }" @click="handler">
        <div class="icon">
            <div class="iconfont icon-caidan" :class="{ active: isTop }"></div>
        </div>
        <div class="middle">
            <div class="text1">码路严选 |</div>
            <input type="text" disabled :class="{ active: isTop }">
            <div class="text2"> 全心全意为学员服务</div>
        </div>
        <div class="icon">
            <div class="iconfont icon-yonghu" :class="{ active: isTop }"></div>
        </div>
    </div>

</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { showToast } from 'vant';
let isTop = ref(false)
onMounted(() => {
    window.addEventListener('scroll', changeTop)

})

let changeTop = () => {
    let t = document.documentElement.scrollTop || document.body.scrollTop;
    if (t > 40) {
        isTop.value = true
    } else {
        isTop.value = false
    }
}

let handler = () => {
    showToast({
        type: 'fail',
        message: '嗨嗐嗨~人家是假搜索框捏~~',
        duration:1500,
    })
}
</script>

<style scoped lang="less">
.search-bar {
    position: fixed;
    z-index: 99;
    display: flex;
    width: 100%;
    height: 1.2rem;
    justify-content: space-between;
    align-items: center;

    .middle {
        width: 80%;
        height: 0.75rem;
        flex: auto;
        position: relative;

        input {
            width: 100%;
            height: 100%;
            border-radius: 0.75rem;
            border: transparent;
            background: rgba(255, 255, 255, .5);

            &.active {
                background-color: #BBE7E7;
            }
        }

        .text1 {
            position: absolute;
            left: 0.3rem;
            top: 0.05rem;
            font-size: 0.5rem;
            color: #1BAEAE;
            font-weight: bold;
            z-index: 999;
        }

        .text2 {
            position: absolute;
            left: 2.7rem;
            top: 0.1rem;
            font-size: 0.4rem;
        }
    }

    .icon {
        width: 10%;
        height: 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;

        .iconfont {
            font-size: .65rem;
            color: #1BAEAE;

            &.active {
                color: white;
            }
        }
    }

    &.active {
        background: #1baeae;
    }

}
</style>